<template>
  <el-container>
    <el-main>
      <el-row>
        <el-col :span="24">
          <el-card class="box-card">
            <div id="pie-instance" class="pie-instance"></div>
          </el-card>
        </el-col>
      </el-row>
    </el-main>
  </el-container>
</template>

<script type="text/babel">
  import echarts from 'echarts';
  // var echarts = require('echarts'); // 此方法需要在依赖中加入 echarts 的依赖: "echarts": "^4.4.0"

  export default {
    data() {
      return {
        weatherIcons: {
          'Sunny': '/img/ai/sunny_128.png',
          'Cloudy': '/img/ai/cloudy_128.png',
          'Showers':  '/img/ai/showers_128.png'
        },
      }
    },
    methods: {
      getOpt: function () {
        return {
          title: {
            text: '天气情况统计',
            subtext: '虚构数据',
            left: 'center'
          },
          tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
          },
          legend: {
            // orient: 'vertical',
            // top: 'middle',
            bottom: 10,
            left: 'center',
            data: ['西凉', '益州','兖州','荆州','幽州']
          },
          series : [
            {
              type: 'pie',
              radius : '65%',
              center: ['50%', '50%'],
              selectedMode: 'single',
              data:[
                {
                  value:1548,
                  name: '幽州',
                  label: {
                    normal: {
                      formatter: [
                        '{title|{b}}{abg|}',
                        '  {weatherHead|天气}{valueHead|天数}{rateHead|占比}',
                        '{hr|}',
                        '  {Sunny|}{value|202}{rate|55.3%}',
                        '  {Cloudy|}{value|142}{rate|38.9%}',
                        '  {Showers|}{value|21}{rate|5.8%}'
                      ].join('\n'),
                      backgroundColor: '#eee',
                      borderColor: '#777',
                      borderWidth: 1,
                      borderRadius: 4,
                      rich: {
                        title: {
                          color: '#eee',
                          align: 'center'
                        },
                        abg: {
                          backgroundColor: '#333',
                          width: '100%',
                          align: 'right',
                          height: 25,
                          borderRadius: [4, 4, 0, 0]
                        },
                        Sunny: {
                          height: 30,
                          align: 'left',
                          backgroundColor: {
                            image: '/img/ai/sunny_128.png'
                          }
                        },
                        Cloudy: {
                          height: 30,
                          align: 'left',
                          backgroundColor: {
                            image: '/img/ai/cloudy_128.png'
                          }
                        },
                        Showers: {
                          height: 30,
                          align: 'left',
                          backgroundColor: {
                            image: '/img/ai/showers_128.png'
                          }
                        },
                        weatherHead: {
                          color: '#333',
                          height: 24,
                          align: 'left'
                        },
                        hr: {
                          borderColor: '#777',
                          width: '100%',
                          borderWidth: 0.5,
                          height: 0
                        },
                        value: {
                          width: 20,
                          padding: [0, 20, 0, 30],
                          align: 'left'
                        },
                        valueHead: {
                          color: '#333',
                          width: 20,
                          padding: [0, 20, 0, 30],
                          align: 'center'
                        },
                        rate: {
                          width: 40,
                          align: 'right',
                          padding: [0, 10, 0, 0]
                        },
                        rateHead: {
                          color: '#333',
                          width: 40,
                          align: 'center',
                          padding: [0, 10, 0, 0]
                        }
                      }
                    }
                  }
                },
                {value:535, name: '荆州'},
                {value:510, name: '兖州'},
                {value:634, name: '益州'},
                {value:735, name: '西凉'}
              ],
              itemStyle: {
                emphasis: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        };
      },
    },
    mounted() {

      var dom = document.getElementById('pie-instance');

      var pieInstance = echarts.init(dom, {
        renderer: 'svg', // 支持 'canvas' 或者 'svg'
        width: dom.clientWidth, // 可显式指定实例宽度，单位为像素。如果传入值为 null/undefined/'auto'，则表示自动取 dom（实例容器）的宽度。
        height: dom.clientHeight, // 可显式指定实例高度，单位为像素。如果传入值为 null/undefined/'auto'，则表示自动取 dom（实例容器）的高度。
      });
      pieInstance.setOption(this.getOpt());

    }
  };
</script>
<style>
  .pie-instance {
    height: 80vh;
  }
</style>


